<template>
    <div class="mic">
        <div class="left" @click="toshowmusic">
            <img :src="musicinfo.pic" :class="{ 'play': isplaymusic }">
        </div>
        <div class="right">
            <div class="text">
                <h1>{{ musicinfo.name }}</h1>
                <p>{{ musicinfo.auther }}</p>
            </div>
            <div>
                <i class="iconfont icon-bofangzhong ico" v-if="isplaymusic" @click="playorstop(false)"></i>
                <i class="iconfont icon-zanting ico" v-else @click="playorstop(true)"></i>
            </div>
        </div>
    </div>
    <div class="musicbox" v-show="showmusic">
        <div style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;">
            <div class="musiccontent">
                <i class="iconfont icon-off-search cansol" @click="close"></i>
                <div class="contenttop" v-show="!isshowLyric">
                    <div class="left">
                        <div class="lefttop">
                            <h1>歌单分类</h1>
                        </div>
                        <div class="imglist">
                            <img :src="item.imgurl" v-for="item in catelog" @click="changemusiclist(item)">
                        </div>
                    </div>
                    <div class="right">
                        <div class="righttop">
                            <h1>{{ currentTop }}</h1>
                            <i class="iconfont icon-nav-search" @click="showsearch"></i>
                            <div class="search" v-if="isshowsearch">
                                <div class="header">
                                    <el-input v-model="input" placeholder="请输入" />
                                    <el-button type="primary" @click="tosearch">搜索</el-button>
                                </div>
                                <div class="list">
                                    <li>歌曲</li>
                                    <li>作者</li>
                                </div>
                                <div class="searchbox" v-show="isserch">
                                    <div class="liitem" v-for="i in searchlist">
                                        <li @click="loadAdnplay(i)">{{ i.name }}</li>
                                        <li>{{ i.auther }}</li>
                                        <i class="iconfont icon-tianjia" @click="addtoplaylist(i, true)"></i>
                                    </div>
                                    <h1 v-if="!isempty">根据热门歌手推荐歌曲</h1>
                                    <div class="liitem" v-for="t in authersearchlist">
                                        <li @click="loadAdnplay(t)">{{ t.name }}</li>
                                        <li>{{ t.auther }}</li>
                                        <i class="iconfont icon-tianjia" @click="addtoplaylist(t, true)"></i>
                                    </div>
                                    <div v-if="isempty">暂无数据</div>
                                    <div class="searchmove" @click="searchhot('dasda')" v-show="isserch && !isempty">{{
                                        paramss.loadMore ? "点击加载更多" : "暂无数据" }}</div>
                                </div>

                            </div>
                        </div>
                        <div class="rightcontent">
                            <div class="list">
                                <li>歌曲</li>
                                <li>作者</li>
                                <li>专辑</li>
                            </div>
                        </div>
                        <div class="musiclist">
                            <div class="musicitem" v-for="item in currentMusicList">
                                <li @click="loadAdnplay(item)">{{ item.name }} </li>
                                <li>{{ item.auther }}</li>
                                <li>{{ item.album }}</li>
                                <i class="iconfont icon-tianjia" @click="addtoplaylist(item, true)"></i>
                            </div>
                            <div class="observe">{{ params.loadMore ? "正在加载..." : "暂无数据" }}</div>
                         </div>
                        <Transition name="custom-classes" enter-active-class="animate__animated animate__fadeIn"
                            leave-active-class="animate__animated animate__fadeOut animate__faster">
                            <div class="musicselect" v-if="showDirs">
                                <div class="rightcontent">
                                    <div class="list">
                                        <li>歌曲</li>
                                        <li>作者</li>
                                        <li>专辑</li>
                                    </div>
                                </div>
                                <div class="musicitem" v-for="data in musicplaylist">
                                    <li @click="loadAdnplay(data)">{{ data.name }}</li>
                                    <li>{{ data.auther }}</li>
                                    <li>{{ data.album }}</li>
                                    <i class="iconfont icon-jianqu" @click="addtoplaylist(data, false)"></i>
                                </div>
                            </div>
                        </Transition>
                    </div>
                </div>
                <Transition name="classes" enter-active-class="animate__animated animate__fadeIn">
                    <div class="contenttop " v-show="isshowLyric" ref="bkc">
                        <div class="bkc">
                            <div class="lyriccontent">
                                <ul class="xx" ref="xx">
                                    <li class="lyricitem" v-for="(info, index) in musicinfo.notNullLyricArr"
                                        @click="tomusicbylyric(index)">{{ info }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </Transition>
                <div class="contentplay">
                    <div class="progress" @click="setProgress" ref="pro">
                        <div class="addprogress" ref="progress"></div>
                    </div>
                    <div class="musicset">
                        <div class="musicinfo">
                            <audio class="audio" ref="audioRef" preload="auto" crossOrigin="anonymous" src="">
                                你的浏览器不支持 audio 元素
                            </audio>
                            <img :src="musicinfo.pic" @click="showLyric()">
                            <div class="title">
                                <h1>{{ musicinfo.name }}</h1>
                                <p>{{ musicinfo.auther }}</p>
                            </div>
                        </div>
                        <div class="cantroler">
                            <i class="iconfont icon-shangyiqu icon" @click="premusic"></i>
                            <i class="iconfont icon-zanting icon" v-if="!isplaymusic" @click="playorstop(true)"></i>
                            <i class="iconfont icon-bofangzhong icon" v-else @click="playorstop(false)"> </i>
                            <i class="iconfont icon-xiayiqu icon" @click="nextmusic"></i>
                        </div>
                        <div class="rightinfo">
                            <span>
                                <i class="iconfont icon-liebiaoxunhuan" @click="changemusicmodle(1)"
                                    v-if="currnetmodle == 1"></i>
                                <i class="iconfont icon-danquxunhuan1" @click="changemusicmodle(2)"
                                    v-if="currnetmodle == 2"></i>
                                <i class="iconfont icon-suijibofang1" @click="changemusicmodle(3)"
                                    v-if="currnetmodle == 3"></i>
                            </span>
                            <div class="time">{{ currentime }} / {{ musicinfo.time }}</div>
                            <i class="iconfont icon-bofangliebiao" @click="showDir"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
import { onMounted, ref, reactive, watch, nextTick } from 'vue';
import useMusic from '@/stores/music';
import { gettime } from "@/utils/index.js"
import { reqToplist, reqTopDetaliList, reqMusicDetail, reqMusicLyricById, reqSearch, reqSearchSingerHot } from "@/api/music.js";
let box
let observe
let music = useMusic();
let el
let bkc = ref()
let xx = ref()
let isshowsearch = ref(false)
let isserch = ref(false)
let currnetmodle = ref(1);/* 当前播放模式 */
let isplaymusic = ref(false);/* 是否在播放音乐 */
let audioRef = ref() /* 音乐播放器的实例 */
let showmusic = ref(false) /*  */
let progressevent/* 进度条事件的变量 */
let endeventref /* 音乐播放结束的的事件变量 */
let showDirs = ref(false) /* 打开的目录 */
let isshowLyric = ref(false)/* 是否展示歌词 */
let progress = ref() /* 进度条实例 */
let pro = ref() /* 进度条盒子实例 */
let catelog = ref([])/* 所有分类的 */
let currentime = ref("00:00") /* 当前的播放的时间 */
let currentTop = ref("") /* 当前的分类的名字 */
const params = reactive({
    limit: 30,/* 当前分类的页数 */
    offset: 0,/* 当前分类的页数 */
    id: "", /* 当前歌曲的id */
    loading: false, /*  */
    loadMore: true,  /* 当前分类加载是否结束 */
})
let currentMusicList = ref([]) /* 当前音乐列表 */
let musicplaylist = ref([
    {
        album: "",
        id: "",
        name: "",
        auther: "",
        pic: "",
    }
]) /* 歌曲菜单 */
let currentMusicIndex = ref(0) /* 当前播放的歌曲的索引 */
let musicinfo = ref({
    url: "",
    id: "",
    name: "",
    auther: "",
    pic: "",
    time: "",
    notNullLyricArr: [],
    timeList: []
}) /* 当前播放的音乐信息 */
let currentLyricindex = ref() /* 当前歌词的下标 */
let input = ref("") /* 搜索的输入框 */
let searchlist = ref([]) /* 搜索的歌曲列表 */
let authersearchlist = ref([]) /* 搜索的歌手列表 */
let isempty = ref(false)
let singer = ref({})
let paramss = ref({
    limit: 20,
    offset: 0,
    id: "",
    loadMore: true,
})
function toshowmusic() {
    showmusic.value = !showmusic.value;
}
function close() {
    showmusic.value = false;
}
function showDir() {
    showDirs.value = !showDirs.value;
}
function showsearch() {
    isshowsearch.value = !isshowsearch.value;
}
/* 展示歌词 */
function showLyric() {
    bkc.value.style.backgroundImage = `url(${musicinfo.value.pic})`
    bkc.value.style.backgroundSize = "100% 100%"
    isshowLyric.value = !isshowLyric.value
}
/* 搜索 */
async function tosearch() {
    authersearchlist.value = []
    if (input.value.length > 0) {
        let res = await reqSearch(input.value)
        isserch.value = true
        isempty.value = false
        if (res.data.code == 200) {
            let arr = res.data.result?.songs
            if (arr) {
                searchlist.value = arr.map(item => {
                    return {
                        id: item.id,
                        name: item.name,
                        auther: item.artists[0].name,
                        pic: item.artists[0].img1v1Url,
                        album: item.album.name
                    }
                })
            }
            let obj = {
                id: "",
                name: "",
            };
            if (!Object.keys(res.data.result).length) {
                isempty.value = true;
            }
            if (res.data.result?.artists) {
                singer.value = Object.assign(obj, res.data.result.artists[0]);
                searchhot("init");
            }

        }
    } else {
        return
    }
}
async function searchhot(type) {
    if (!paramss.value.loadMore) return;
    paramss.value.id = singer.value.id;
    if (type == "init") {
        paramss.value.offset = 0;
    } else {
        paramss.value.offset = paramss.value.limit + paramss.value.offset;
    }
    const res = await reqSearchSingerHot(paramss.value);
    if (res.data.code == 200) {
        let list = Array.isArray(res.data.songs) ? res.data.songs : [];
        if (!list.length) {
            paramss.loadMore = false;
        }
        let data = list.filter((song) => isActive(song.id))
        data = data.map(item => {
            return {
                album: item.al.name,
                pic: item.al.picUrl,
                name: item.name,
                id: item.id,
                auther: item.ar[0].name,
            }
        })
        authersearchlist.value = paramss.offset == 0 ? data : authersearchlist.value.concat(data);
    }
}
// 判断当前歌曲是否在用户定制列表中
const isActive = (id) => {
    if (!musicplaylist.value.length) {
        return false;
    }
    let index = musicplaylist.value.findIndex((item) => item.id == id);
    if (index == -1) {
        return true;
    } else {
        return false;
    }
};
/* 移除事件监听函数 */
function removeEvent() {
    console.log("移除事件监听函数");
    progress && progress.value.removeEventListener("click", progressevent);
    endeventref && endeventref.removeEventListener("ended", endevent);
}
/* 上一首歌曲 */
function premusic() {
    /* 先查看当前放的歌是不是自己歌单的歌 */
    let flag = musicplaylist.value.find(item => item.id == musicinfo.value.id)
    if (!flag) {
        currentMusicIndex.value = 0
    } else {
        let len = musicplaylist.value.length
        if (currentMusicIndex.value == 0) {
            currentMusicIndex.value = len - 1
        } else {
            currentMusicIndex.value--
        }
    }
    changemusic(currentMusicIndex.value)
}
/* 下一首歌 */
function nextmusic() {
    /* 先查看当前放的歌是不是自己歌单的歌 */
    let flag = musicplaylist.value.find(item => item.id == musicinfo.value.id)
    if (!flag) {
        currentMusicIndex.value = 0
    } else {
        let len = musicplaylist.value.length
        if (currentMusicIndex.value >= len - 1) {
            currentMusicIndex.value = 0
        } else {
            currentMusicIndex.value++
        }
    }
    changemusic(currentMusicIndex.value)
}
/* 加载音乐 */
async function loadmusic(item) {
    const res = await reqMusicDetail({
        id: item.id,
        level: "exhigh",
    });
    if (res.data.code == 200) {
        musicinfo.value.url = res.data.data[0].url,
            musicinfo.value.id = res.data.data[0].id,
            musicinfo.value.name = item.name,
            musicinfo.value.auther = item.auther,
            musicinfo.value.pic = item.pic,
            musicinfo.value.time = gettime(res.data.data[0].time / 1000)
        audioRef.value.src = res.data.data[0].url;
        music.setcurrentmusicinfo(musicinfo.value)
    }
    await getLyric(item.id)
}
/* 加载和播放音乐 */
async function loadAdnplay(item) {
    await loadmusic(item)
    play()
}
/* 获取歌词 */
const getLyric = async (id) => {
    const res = await reqMusicLyricById(id);
    if (res.data.code == 200) {
        let lyricArr = res.data.lrc.lyric.split("\n");
        const notNullLyricArr = [];
        const timeList = [];
        lyricArr.forEach((v) => {
            let arr = v.split("]");
            let timeArr = arr[0].replace("[", "").split(":");
            if (arr[1] && arr[0]) {
                // 不为空才收集歌词
                timeList.push((timeArr[0] - 0) * 1000 * 60 + (timeArr[1] - 0) * 1000);
                notNullLyricArr.push(arr[1]);
            }
        })
        musicinfo.value.notNullLyricArr = notNullLyricArr;
        musicinfo.value.timeList = timeList;
        music.setlyric(notNullLyricArr)
        music.settimeList(timeList)
        await nextTick()
        el = document.getElementsByClassName("lyricitem")
        xx.value.scrollTo(0, 0)
        bkc.value.style.backgroundImage = `url(${musicinfo.value.pic})`
        bkc.value.style.backgroundSize = "100% 100%"
    }
};
/* 点击暂停或者播放 */
function playorstop(flag) {
    isplaymusic.value = !isplaymusic.value;
    if (flag) {
        play()
    } else {
        stop()
    }
}
/* 播放音乐 */
function play() {
    audioRef.value.play()
        .then(() => {
            progressevent = audioRef.value.addEventListener("timeupdate", updataprogress);
            endeventref = audioRef.value.addEventListener("ended", endevent);
            isplaymusic.value = true
        })
        .catch(() => {
            play()
        })
}
/* 暂停播放 */
function stop() {
    audioRef.value.pause()
    isplaymusic.value = false
}
/* 改变进度条 */
function setProgress(e) {
    let persent = (e.offsetX / pro.value.clientWidth).toFixed(2);
    if (progress.value) {
        progress.value.style.width = `${e.offsetX}px`;
    }
    play()
    audioRef.value.currentTime = persent * audioRef.value.duration;
}
/* 当音乐完结的时候的事件函数 */
function endevent(e) {
    console.log(currnetmodle.value);
    currnetmodle.value = parseInt(currnetmodle.value)
    switch (currnetmodle.value) {
        case 1:
            nextmusic()
            break;
        case 2:
            removeEvent()
            play()
            break;
        case 3:
            /* 随机播放 */
            currentMusicIndex.value = Math.floor(Math.random() * musicplaylist.value.length)
            changemusic(currentMusicIndex.value)
            break;
        default:
            break;
    }
}
/* 改变播放音乐 */
async function changemusic(index) {
    removeEvent()
    let item = musicplaylist.value[index]
    await loadAdnplay(item)

}
/* 当音乐在播放的时候事件监听函数 */
function updataprogress(e) {
    const { duration, currentTime } = e.target;
    console.log(duration, currentTime );
    let progresscent = (currentTime / duration) * 100;
    if (progress.value) {
        progress.value.style.width = `${progresscent}%`;
    }
    currentime.value = gettime(currentTime)
    let index = musicinfo.value.timeList.findIndex(el => {
        return el > parseInt(currentTime * 1000)
    })
    if (index > 0) {
        currentLyricindex.value = index - 1
    }
}
/* 点击歌词跳转歌曲位置 */
function tomusicbylyric(index) {
    let totime = musicinfo.value.timeList[index]
    audioRef.value.currentTime = totime / 1000
    currentLyricindex.value = index
}
watch(currentLyricindex, (newval) => {
    if (newval && isshowLyric.value) {
        let len = musicinfo.value.notNullLyricArr.length
        let persent = xx.value.scrollHeight / len
        for (const elx of el) {
            elx.classList.remove('current')
        }
        if (newval > 5 && newval < len - 6) {
            xx.value.scrollTo(0, persent * (newval - 5))
        }
        el[newval].classList.add("current")
    } else {
        el[newval].classList.add("current")
    }
})
watch(input, (newval) => {
    if (newval == "") {
        searchlist.value = []
        authersearchlist.value = []
        isserch.value = false
    }
})
/* 修改播放模式 */
function changemusicmodle(meth) {
    if (meth >= 3) {
        meth = 1
    } else {
        meth += 1
    }
    music.setnextmusicmeth(meth)
    currnetmodle.value = meth
}
/* 添加或者删除歌单歌曲 */
function addtoplaylist(item, flag) {
    if (flag) {
        let index = musicplaylist.value.findIndex(i => i.id == item.id)
        if (index == -1) {
            musicplaylist.value.push(item)
            music.setplaylist(musicplaylist.value)
        } else {
            return
        }
    } else {
        let index = musicplaylist.value.findIndex(i => i.id == item.id)
        musicplaylist.value.splice(index, 1)

        if (musicplaylist.value.length == 0) {
            musicplaylist.value.push({
                name: musicinfo.value.name,
                album: "",
                id: musicinfo.value.id,
                auther: musicinfo.value.auther,
                pic: musicinfo.value.pic,
            })
        }
        music.setplaylist(musicplaylist.value)
    }
}
/* 切换歌单 */
async function changemusiclist(data) {
    currentTop.value = data.name
    params.id = data.id
    params.limit = 30
    params.offset = 0
    params.loadMore = true
    await reqTopMusicList(data.id);
}

/*  */
onMounted(async () => {
    let res = await reqToplist()
    if (res.data.code == 200) {
        catelog.value = res.data.list.map((item) => {
            return {
                name: item.name,
                id: item.id,
                imgurl: item.coverImgUrl,
            }
        })
        music.setcatelog(catelog.value)
        currentTop.value = catelog.value[3].name
        await reqTopMusicList(catelog.value[3].id);
        observeBox();
    }
    let musicsinfos = music.getmusicinfo
    currnetmodle.value = music.getnextmusicmeth
    musicinfo.value = Object.assign(musicinfo.value, musicsinfos)
    if (musicsinfos && musicsinfos.id) {
        await loadmusic(musicsinfos)
        initplaylist()
    } else {
        await loadmusic(currentMusicList.value[0])
        /* c重新获取一个歌曲 */
        initplaylist()
    }
    el = document.getElementsByClassName("lyricitem")
})
/* 初始化歌单 */
function initplaylist() {
    /* 获取歌单 */
    musicplaylist.value = music.getplaylist
    if (musicplaylist.value.length == 0) {
        musicplaylist.value.push({
            id: musicinfo.value.id,
            album: "",
            name: musicinfo.value.name,
            auther: musicinfo.value.auther,
            pic: musicinfo.value.pic,
        })
    }
}
// 格局排行榜id 查询排行榜音乐 
const reqTopMusicList = async (id) => {
    if (id) {
        params.id = id;
    }
    if (!params.loadMore) {
        return;
    }
    const res = await reqTopDetaliList(params);
    if (res.data.code == 200) {
        if (!res.data.songs.length) {
            params.loadMore = false;
        }
        let list = res.data.songs.map(item => {
            return {
                album: item.al.name,
                pic: item.al.picUrl,
                name: item.name,
                id: item.id,
                auther: item.ar[0].name,
            }
        })
        currentMusicList.value =
            params.offset == 0 ? list : currentMusicList.value.concat(list);
    }
    params.loading = false;
};
// 无限加载
const observeBox = () => {
    // 获取要监听的元素
    box = document.querySelector(".observe");
    observe = new IntersectionObserver(
        (entries) => {
            entries.forEach(async (e) => {
                if (e.isIntersecting && e.intersectionRatio > 0) {
                    if (!params.loading) {
                        await loadMore();
                    }
                }
            });
        });
    box && observe.observe(box);
}
const loadMore = async () => {
    params.offset = params.offset + params.limit;
    await reqTopMusicList();
};

</script>

<style scoped lang="scss">
.cansol {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 9999;
}

.play {
    animation: route 1.5s linear infinite;

    @keyframes route {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
}

.mic {
    position: fixed;
    left: -25px;
    bottom: 100px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    transition: all 0.5s;
    background-color: #ffffffb5;

    .left {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .ico {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 15px;
            cursor: pointer;
        }
    }

    .right {
        cursor: pointer;
        margin-left: 5px;
        width: 90px;
        align-items: center;
        display: none;

        .text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 50px;
            width: 80px;
            @include text-Onerow;
        }

        @include userTheme {
            font-family: getThemeValue("fontfamily");
        }

        h1 {
            text-align: center;
        }
    }

    &:hover {
        left: 0;

        .right {
            display: flex;
        }
    }
}

.musicbox {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #00000080;
    z-index: 999;

    .musiccontent {
        position: relative;
        padding: 30px 10px 0 10px;
        height: 500px;
        width: 100%;
        max-width: 980px;
        background-color: #fff;
        border-radius: 25px;

        .contenttop {
            width: 100%;
            height: 390px;
            display: flex;

            @include userTheme {
                font-family: getThemeValue("fontfamily");
            }

            .left {
                width: 40%;
                padding: 10px;

                @include userTheme {
                    background-color: getThemeValue("musicleftColor");
                }

                .imglist {
                    height: 97%;
                    display: flex;
                    max-height: 98%;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        width: 0 !important
                    }

                    img {
                        height: 80px;
                        width: 80px;
                        margin: 10px 0;
                    }
                }
            }

            .right {
                width: 70%;
                padding: 10px;
                position: relative;

                .righttop {
                    display: flex;
                    font-size: $font-size-m;
                    justify-content: space-between;
                    align-items: center;
                    position: relative;

                    @include userTheme {
                        font-family: getThemeValue("fontfamily");
                    }

                    .search {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        height: 250px;
                        width: 300px;

                        @include userTheme {
                            font-family: getThemeValue("fontfamily");
                            background-color: getThemeValue("musicsearchColor");
                        }


                        transform: translateY(100%);
                        overflow-y: scroll;

                        &::-webkit-scrollbar {
                            width: 0 !important
                        }

                        .list {
                            display: flex;
                        }

                        .searchbox {
                            .liitem {
                                display: flex;
                                margin-top: 5px;
                            }

                            h1 {
                                font-size: 18px;
                                margin: 8px 0;
                            }
                        }

                        li {
                            width: 45%;
                            @include text-Onerow;
                            cursor: pointer;
                        }

                        .header {
                            display: flex;
                        }

                        .searchmove {
                            cursor: pointer;
                            text-align: center;
                            margin-top: 5px;
                            font-size: 18px;
                        }
                    }
                }

                .rightcontent {
                    .list {
                        margin-top: 10px;
                        display: flex;

                        li {
                            width: 30%;

                        }
                    }
                }

                .musiclist {
                    height: 89%;
                    max-height: 95%;
                    overflow-y: scroll;


                    &::-webkit-scrollbar {
                        width: 0 !important
                    }

                    .musicitem {
                        display: flex;
                        margin: 8px 0;

                        li {
                            cursor: pointer;
                            width: 30%;
                            @include text-Onerow;
                        }
                    }

                    .observe {
                        text-align: center;
                        font-size: $font-size-s;
                    }
                }

                .musicselect {
                    position: absolute;
                    height: 50%;
                    max-height: 50%;
                    bottom: 0;
                    right: 0;
                    width: 50%;
                    overflow-y: scroll;

                    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
                    z-index: 99;

                    @include userTheme {
                        background-color: getThemeValue("musicplaylistColor");
                    }

                    &::-webkit-scrollbar {
                        width: 0 !important
                    }

                    .musicitem {
                        display: flex;
                        margin: 8px 0;

                        li {
                            cursor: pointer;
                            width: 30%;
                            @include text-Onerow;
                        }
                    }
                }
            }
        }

        .contentplay {
            padding: 5px 0px;

            .progress {
                width: 100%;
                height: 6px;
                background-color: rgb(243, 238, 233);

                .addprogress {
                    position: relative;
                    height: 100%;
                    width: 0%;
                    background: -webkit-gradient(linear, left top, right top, from(#ffd33d), color-stop(17%, #ea4aaa), color-stop(34%, #b34bff), color-stop(51%, #01feff), color-stop(68%, #ffd33d), color-stop(85%, #ea4aaa), to(#b34bff));
                    background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);

                    &::after {
                        content: "";
                        position: absolute;
                        right: -2px;
                        top: -1.5px;
                        height: 8px;
                        width: 8px;
                        border-radius: 50%;
                        background-color: #e3c1c1;
                    }
                }
            }

            .musicset {
                display: flex;
                justify-content: space-around;
                height: 60px;
                width: 100%;
                padding: 5px 20px;

                .musicinfo {
                    @include userTheme {
                        font-family: getThemeValue("fontfamily");
                    }

                    display: flex;
                    align-items: center;

                    img {
                        height: 50px;
                        width: 50px;
                        border-radius: 50%;
                        margin-right: 5px;
                    }

                    .title {}
                }

                .cantroler {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    width: 100px;

                    .icon {
                        font-size: 20px;
                    }

                    .icon:nth-child(2) {
                        font-size: 35px;
                    }
                }

                .rightinfo {
                    display: flex;
                    align-items: center;

                    .time {
                        font-size: $font-size-s;
                        margin: 0 10px;
                    }
                }
            }
        }

        .bkc {
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            position: relative;
            border-radius: 20px;

            .lyriccontent {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 9999;
                height: 100%;
                width: 100%;
                overflow-y: hidden;
                border-radius: 20px;

                .xx {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    overflow-y: scroll;
                    border-radius: 20px;

                    &::-webkit-scrollbar {
                        width: 0 !important
                    }
                }

                li {
                    text-align: center;
                    margin-bottom: 12px;
                    cursor: pointer;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;

                    @include userTheme {
                        background-image: getThemeValue("musicLyriccolor");
                        ;
                    }
                }

                .current {
                    color: #fff;
                    font-size: 22px;
                    margin: 20px;

                    @include userTheme {
                        background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255), rgb(255, 255, 255)) !important;
                    }
                }

                &::-webkit-scrollbar {
                    width: 0 !important
                }

            }
        }
    }
}

@media screen and (max-width: 650px) {
    .contenttop {
        .left {
            display: none;
        }

        .right {
            width: 100% !important;
        }
    }

    .musicset {
        padding: 5px 0px !important;
    }
}
</style>